import React from "react";

import { Tabs, Button, Form, Input, Select, Mention, Row, Col, Upload, Icon } from "antd";
const TabPane = Tabs.TabPane,
    FormItem = Form.Item,
    Option = Select.Option;

class Add extends React.Component {
    componentWillMount() {
        const {setPage} = this.props;
        setPage([{
            title: "车联网平台首页",
            url: "/dashboard"
        }, {
            title: "车型管理",
            url: "/model"
        }], "新增车型")
    }

    render() {
        const Create = Form.create()(CreateForm),
            Aquipment = Form.create()(AquipmentForm);

        return <div>
                   <Tabs>
                       <TabPane tab="车型基本信息" key="1">
                           <Create />
                       </TabPane>
                   </Tabs>
                   <Tabs>
                       <TabPane tab="车型设备信息" key="1">
                           <Aquipment />
                       </TabPane>
                   </Tabs>
                   <div>
                       <Button type="primary" htmlType="submit" size="large">
                           确定并继续新增
                       </Button>
                       <Button type="primary" htmlType="submit" size="large" className="ml20">
                           确定
                       </Button>
                   </div>
               </div>
    }
}

class CreateForm extends React.Component {

    render() {
        const {getFieldDecorator} = this.props.form;
        const littleLayout = {
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 16
            }
        };

        const sampleLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 8
            }
        };
        const uploadLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 22
            }
        };

        const fileList = [{
            uid: -1,
            name: 'xxx.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }, {
            uid: 1,
            name: "abc",
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }];

        return <Form>
                   <Row>
                       <Col span={ 6 }>
                       <FormItem {...littleLayout} label="型号" hasFeedback>
                           { getFieldDecorator('name', {
                                 rules: [{
                                     required: true,
                                     message: '请输入车辆型号名称!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                       <Col span={ 6 } offset={ 1 }>
                       <FormItem {...littleLayout} label="电池电量(kW.h)" hasFeedback>
                           { getFieldDecorator('electricQuantity', {
                                 rules: [{
                                     required: true,
                                     message: '请输入车辆额定电量!',
                                 }, {
                                     type: "number",
                                     message: '电量必须数字!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span={ 6 }>
                       <FormItem {...littleLayout} label="型号编码" hasFeedback>
                           { getFieldDecorator('code', {
                                 rules: [{
                                     required: true,
                                     message: '请输入车辆型号编码!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                       <Col span={ 6 } offset={ 1 }>
                       <FormItem {...littleLayout} label="充电电压" hasFeedback>
                           { getFieldDecorator('chargeVoltage', {
                                 rules: [{
                                     required: true,
                                     message: '请输入车辆充电电压!',
                                 }, {
                                     type: "number",
                                     message: '充电电压必须数字!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span={ 6 }>
                       <FormItem {...littleLayout} label="整车厂家" hasFeedback>
                           { getFieldDecorator('factory', {
                                 rules: [{
                                     required: true,
                                     message: '请选择生产此车型的整车厂家!',
                                 }]
                             })(
                                 <Select>
                                     <Option value="1">黄海</Option>
                                     <Option value="2">一汽红塔</Option>
                                     <Option value="3">一汽川专</Option>
                                 </Select>
                             ) }
                       </FormItem>
                       </Col>
                       <Col span={ 6 } offset={ 1 }>
                       <FormItem {...littleLayout} label="电池模块数" hasFeedback>
                           { getFieldDecorator('moduleNum', {
                                 rules: [{
                                     required: true,
                                     message: '请输入电池模块数!',
                                 }, {
                                     type: "number",
                                     message: '电池模块数必须为整数!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span={ 6 }>
                       <FormItem {...littleLayout} label="车辆类型" hasFeedback>
                           { getFieldDecorator('type', {
                                 rules: [{
                                     required: true,
                                     message: '请选择车辆类型!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                       <Col span={ 6 } offset={ 1 }>
                       <FormItem {...littleLayout} label="转速比" hasFeedback>
                           { getFieldDecorator('coefficient', {
                                 rules: [{
                                     required: true,
                                     message: '请输入车辆转速比!',
                                 }, {
                                     type: "number",
                                     message: '转速比必须数字!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span={ 6 }>
                       <FormItem {...littleLayout} label="座位数" hasFeedback>
                           { getFieldDecorator('seatNum', {
                                 rules: [{
                                     required: true,
                                     message: '请输入座位数!',
                                 }, {
                                     type: "number",
                                     message: '座位数必须为整数!',
                                 }]
                             })(
                                 <Input />
                             ) }
                       </FormItem>
                       </Col>
                   </Row>
                   <FormItem {...uploadLayout} label="车型图片">
                       { getFieldDecorator('images', {
                             rules: [{
                                 required: true,
                                 message: '请输入上传车型图片!',
                             }]
                         })(
                             <div>
                                 { fileList.map((item, i) => (<div key={ i } className="upload-item">
                                                                  <img src={ item.url } />
                                                                  <div className="upload-item-oprs">
                                                                      <span className="opr">设为默认图片</span>
                                                                      <span className="opr">删除</span>
                                                                  </div>
                                                              </div>)) }
                                 <Upload action="/upload.do" listType="picture-card" showUploadList={ false } onChange={ () => {
                                                                                                                         } }>
                                     <div>
                                         <Icon type="plus" />
                                         <div className="ant-upload-text">上传图片</div>
                                     </div>
                                 </Upload>
                             </div>
                         ) }
                   </FormItem>
               </Form>
    }
}

class AquipmentForm extends React.Component {
    render() {
        const {getFieldDecorator} = this.props.form;
        const sampleLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 17
            },
            required: false
        };

        const types = [{
            code: "vcu",
            label: "整车控制器"
        }, {
            code: "mc",
            label: "电机控制器"
        }, {
            code: "bms",
            label: "电池管理系统"
        }, {
            code: "battery",
            label: "动力电池"
        }];

        return <Form>
                   { types.map((item, i) => <div key={ i } className="form-card">
                                                <div className="title">
                                                    { item.label }
                                                    <Button size="small" icon="plus-circle-o">继续添加</Button>
                                                </div>
                                                <div className="body">
                                                    <FormItem {...sampleLayout} label="设备厂家">
                                                        { getFieldDecorator('factory', {
                                                              rules: [{
                                                                  required: true,
                                                                  message: '请选择供应设备的厂家!',
                                                              }]
                                                          })(
                                                              <Select>
                                                                  <Option value="1">黄海</Option>
                                                                  <Option value="2">一汽红塔</Option>
                                                                  <Option value="3">一汽川专</Option>
                                                              </Select>
                                                          ) }
                                                    </FormItem>
                                                    <FormItem {...sampleLayout} label="型号">
                                                        { getFieldDecorator('model', {
                                                              rules: [{
                                                                  required: true,
                                                                  message: '请输入设备的型号!',
                                                              }]
                                                          })(
                                                              <Input />
                                                          ) }
                                                    </FormItem>
                                                    <FormItem {...sampleLayout} label="产品名称">
                                                        { getFieldDecorator('name', {
                                                              rules: [{
                                                                  required: true,
                                                                  message: '请输入设备的产品名称!',
                                                              }]
                                                          })(
                                                              <Input />
                                                          ) }
                                                    </FormItem>
                                                </div>
                                            </div>) }
               </Form>
    }
}

export default Add;